<template>
	<view class="con">
		<u-navbar title=" " leftIconColor='#fff' titleStyle='color:#fff;' @rightClick="rightClick" bgColor='transparent'
			:autoBack="true"></u-navbar>

		<view class="header" :style="{paddingTop:pt+'px'}">
			<image class="topbg" src="/pages/my/static/topbg.png" mode=""></image>
			<image class="toptitle" src="/pages/my/static/toptitle.png" mode=""></image>
			<view class="word">
				送同等价值积分或产品 如酒茶食品书画民宿等
			</view>
		</view>
		<view class="box">
			<view class="box_header">
				<view class="item_first">
					等级
				</view>
				<view class="item_sed">
					金额
				</view>
				<view class="item3">
					交费
				</view>
			</view>
			<view class="box_item" v-for="(item,index) in list" :key="index">
				<view class="item_first" style="display: flex;align-items: center;">
					<image style="width: 47rpx;height: 62rpx;margin-right: 26rpx;" :src="item.icon" mode=""></image>
					{{item.name}}
				</view>
				<view class="item_sed">
					<text style="font-weight: bold;color: #F85707;">{{item.num}}</text>
				</view>
				<view class="item3">
					<view class="btn">
						确认
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{name:'生员',icon:'/pages/my/static/ic1.png',num:100,id:1},
					{name:'元秀',icon:'/pages/my/static/ic2.png',num:999,id:2},
					{name:'举人',icon:'/pages/my/static/ic3.png',num:3650,id:3},
					{name:'贡士',icon:'/pages/my/static/ic4.png',num:10000,id:4},
					{name:'进士',icon:'/pages/my/static/ic5.png',num:30000,id:5},
					{name:'探花',icon:'/pages/my/static/ic6.png',num:50000,id:6},
					{name:'榜眼',icon:'/pages/my/static/ic7.png',num:100000,id:7},
					{name:'探花',icon:'/pages/my/static/ic8.png',num:200000,id:8},
				],
				pt:0
			};
		},
		onLoad() {
			this.pt = uni.getSystemInfoSync().statusBarHeight
		}
	}
</script>

<style lang="less">
	.header {
		width: 750rpx;
		height: 621rpx;
		background: linear-gradient(179deg, #FE712A, #F85707);
		// padding-top: var();
		position: relative;
		// z-index: 1;

		.topbg {
			position: absolute;
			width: 621rpx;
			height: 521rpx;
			bottom: 21rpx;
			right: 0;
		}

		.toptitle {
			position: absolute;
			left: 38rpx;
			bottom: 379rpx;
			width: 311rpx;
			height: 90rpx;
		}

		.word {
			font-size: 24rpx;
			color: #FFFFFF;
			text-shadow: 0px 3rpx 6rpx rgba(247, 94, 17, 0.6);
			position: absolute;
			left: 37rpx;
			bottom: 323rpx;
		}
	}

	.box {
		width: 630rpx;
		
		background: #FFFFFF;
		box-shadow: 0px 2rpx 59rpx 0px rgba(12, 0, 36, 0.1);
		border-radius: 42rpx;
		margin: -261rpx 30rpx 0;
		// z-index: 990;
		position: relative;
		font-size: 28rpx;
		color: #222;
		padding: 0 30rpx;

		.box_header {
			display: flex;
			align-items: center;
			padding: 40rpx 0 30rpx;
			border-bottom: 1rpx solid #DADADA;
		}

		.item_first {
			padding-left: 40rpx;
			width: 250rpx;
		}

		.item_sed {
			width: 220rpx;
		}

		.item3 {
			width: 103rpx;
			text-align: center;

			.btn {
				line-height: 57rpx;
				color: #FFFFFF;
				font-size: 26rpx;

				background-color: #FE712A;
				border-radius: 29rpx;
			}
		}
	}
	.box_item{
		display: flex;
		align-items: center;
		height: 125rpx;
		border-bottom: 1rpx solid #DADADA;
	}
</style>
